<template>
	<div class="easyd-weixin-Box">

		<div class="app_page_box" style="bottom: 50px;">
			<div class="app_page">
				<div class="communication_add app_box_content_list app_list_box MARGIN_BOTTOM_10">
					<div class="communication_add_top">
						<div class="communication_add_img">
							<img src="../../../../static/images/fuwukaxiangqing3.jpg" />
						</div>
						<div class="communication_add_info">
							<input type="text" id="" value="" placeholder="请输入标题" />
							<input type="text" id="" value="" placeholder="请输入描述" />
						</div>
					</div>
					<div class="communication_add_content">
						<div class="app_box_content">
							<div class="app_box_content_left">
								原价格
							</div>
							<div class="app_box_content_right">
								<input type="text" id="" placeholder="请输入" value="" />
							</div>
						</div>
						<div class="app_box_content">
							<div class="app_box_content_left">
								现价格
							</div>
							<div class="app_box_content_right">
								<input type="text" id="" placeholder="请输入" value="" />
							</div>
						</div>
					</div>
				</div>
				<div class="content_area app_box_content_list app_list_box MARGIN_BOTTOM_10">
					<div class="add_box" v-if="dataList.length > 0">
						<div class="add_img">
							<img src="../../../../dist/static/images/fuwukaxiangqing1.jpg" />
						</div>
						<div class="add_txt">
							<textarea name="" rows="10" cols="" placeholder="请输入内容"></textarea>
						</div>
						<div class="add_video">
							<video width="" height="">
								<source src="myvideo.mp4" type="video/mp4"></source>
								<source src="myvideo.ogv" type="video/ogg"></source>
								<source src="myvideo.webm" type="video/webm"></source>
								<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
									<param name="movie" value="myvideo.swf" />
									<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
								</object> 当前浏览器不支持 video直接播放，点击这里下载视频：
								<a href="myvideo.webm">下载视频</a>
							</video>
						</div>
					</div>

					<p class="content_area_info C4"><span class="fa fa-edit"></span>点击下方添加内容</p>

					<div class="content_area_btn app_box_flex">
						<div class="app_box_flex_1">
							<span class="fa fa-file-text-o"></span>
							<p>添加文字</p>
						</div>
						<div class="app_box_flex_1">
							<span class="fa fa-image"></span>
							<p>添加图片</p>
						</div>
						<div class="app_box_flex_1">
							<span class="fa fa-video-camera"></span>
							<p>添加视频</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="app_bottom_box">
			<div class="app_bottom_box_right">
				保存
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	export default {

		data() {
			return {
				dataList: [], //数据
			};
		},
		computed: {
			...mapState({
				//    isShowAppGuide : state => state.AppModule.isShowAppGuide,
				//    isShopGuide    : state => state.ShopIndexModule.isShopGuide
			})
		},
		mounted() {

		},
		methods: {

			//  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),

			uploadChange(e) {
				console.log("上传");
			},
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.communication_add {
		padding: 0;
	}
	
	.communication_add .communication_add_top {
		overflow: hidden;
		display: flex;
		padding: 10px;
	}
	
	.communication_add .communication_add_top .communication_add_img {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		background: #a5a5a5;
	}
	
	.communication_add .communication_add_top .communication_add_img img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	.communication_add .communication_add_top .communication_add_info {
		flex: 1;
	}
	
	.communication_add .communication_add_top .communication_add_info input {
		width: 93%;
		padding: 0 3%;
		line-height: 40px;
		margin-bottom: 10px;
	}
	
	.communication_add .communication_add_top .communication_add_info input:last-child {
		margin-bottom: 0px;
	}
	
	.content_area {
		padding: 10px;
	}
	
	.content_area .add_box {}
	
	.content_area .add_box .add_img {
		height: 250px;
		margin-bottom: 10px;
		border: 1px dotted #FBD415;
		padding: 10px;
	}
	
	.content_area .add_box .add_img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.content_area .add_box .add_txt {
		margin-bottom: 10px;
		border: 1px dotted #FBD415;
		padding: 10px;
	}
	
	.content_area .add_box .add_txt textarea {
		width: 100%;
		border: 0;
	}
	
	.content_area .add_box .add_video {
		margin-bottom: 10px;
		border: 1px dotted #FBD415;
		padding: 10px;
	}
	
	.content_area .add_box .add_video video {
		width: 100%;
	}
	
	.content_area .content_area_info {
		text-align: center;
		padding: 50px;
	}
	
	.content_area .content_area_info span {
		font-size: x-large;
		padding-right: 5px;
	}
	
	.content_area .content_area_btn {}
	
	.content_area .content_area_btn .app_box_flex_1 {
		text-align: center;
		background: #d6d6d6;
		padding: 10px 5px;
		margin-right: 5px;
	}
	
	.content_area .content_area_btn .app_box_flex_1:last-child {
		margin-right: 0px;
	}
	
	.content_area .content_area_btn .app_box_flex_1 span {
		font-size: x-large;
	}
	
	.content_area .content_area_btn .app_box_flex_1 p {
		line-height: initial;
	}
</style>